<template>
  <div class="base-count">
    <button @click="count--">-</button>
    <span>{{ count }}</span>
    <button @click="count++">+</button>

    <hr>

    BaseCount.vue - a: {{ a }} <button @click="changeA">changeA</button>

    <hr>

    BaseCount.vue - b: {{ b }} <button @click="changeB">changeB</button>
  </div>
</template>

<script>
export default {
  // 1.自己的数据随便修改  （谁的数据 谁负责）
  data () {
    return {
      count: 100,
    }
  },
  // 2.外部传过来的数据 不能随便修改
  props: {
    a: Object,
    b: Array
  },
  methods: {
    changeB() {
      // eslint-disable-next-line vue/no-mutating-props
      this.b.push(4, 5, 6)
    },
    changeA() {
      // 这里修改的是 当前组件的 a 属性的值
      // eslint-disable-next-line vue/no-mutating-props
      // this.a = { name: 'ls', age: 20 } // 新对象：会开辟一块新的内存空间用来存储这个数据，赋值其实赋的是内存地址

      // 花里胡哨的技巧：
      // 注意：其实，对于复杂数据类型的prop而言，子组件可以修改内部的数据，父组件也会同步更新
      // 禁用代码规范检查 
      // eslint-disable-next-line vue/no-mutating-props
      // this.a.name = 'ls' // a 属性的值，没有变过（和父组件的userInfo指向同一个内存地址），变的里面的name
      // 禁用代码规范检查 
      // eslint-disable-next-line vue/no-mutating-props
      // this.a.age = 20 // a 属性的值，没有变过，变的里面的age
    }
  }
}
</script>

<style>
.base-count {
  margin: 20px;
}
</style>